"use client";
import { RainbowButton } from "@/components/button/RainbowButton";
import { MagicText } from "@/components/text/MagicText";
import { BookType } from "@/types/book";
import * as Dialog from "@radix-ui/react-dialog";
import { useRouter } from "next/navigation";
import { useState } from "react";
import { MdClose } from "react-icons/md";

type DeleteBookProps = {
  item: BookType;
}
export const DeleteBook = ({item}: DeleteBookProps) => {

  const route = useRouter();

  const { id, original, rewrite } = item;

  const [open, setOpen] = useState(0);

  const handleDelete = async () => {
    const res = await fetch(`/api/admin/book`, {
      method: 'DELETE',
      body: JSON.stringify({ id })
    }).then(resp => resp.json())
    console.log(res)
    window.location.reload();
  }
  return (
    
    <Dialog.Root open={!!open}>
      <Dialog.Trigger asChild>
      <RainbowButton size='sm' buttonType='danger' className='ml-[10px]' onClick={() => setOpen(1)}>删除</RainbowButton>
      </Dialog.Trigger>
      <Dialog.Portal>
        <Dialog.Overlay className="fixed inset-0 bg-blackA6 data-[state=open]:animate-overlayShow" />
        <Dialog.Content className="fixed left-1/2 top-1/2 max-h-[85vh] w-[90vw] max-w-[450px] -translate-x-1/2 -translate-y-1/2 rounded-md bg-white p-[25px] shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] focus:outline-none data-[state=open]:animate-contentShow">
          <Dialog.Title >
            <MagicText className="m-0 text-[20px] font-medium text-mauve12" text="确定要删除?" />
          </Dialog.Title>

          <fieldset className="mb-[15px] flex items-center gap-5 mt-[36px]">
            <label
              className="w-[48px] text-right text-[15px]"
              htmlFor="original"
            >
              原句：
            </label>
            <input
              className="inline-flex h-[35px] w-full flex-1 items-center justify-center rounded px-2.5 text-[15px] leading-none shadow-[0_0_0_1px] shadow-violet7 outline-none focus:shadow-[0_0_0_2px] focus:shadow-violet8"
              id="original"
              value={original}
              readOnly
            />
          </fieldset>
          <fieldset className="mb-[15px] flex items-center gap-5">
            <label
              className="w-[48px] text-right text-[15px]"
              htmlFor="rewrite"
            >
              重写：
            </label>
            <input
              className="inline-flex h-[35px] w-full flex-1 items-center justify-center rounded px-2.5 text-[15px] leading-none shadow-[0_0_0_1px] shadow-violet7 outline-none focus:shadow-[0_0_0_2px] focus:shadow-violet8"
              id="rewrite"
              value={rewrite}
              readOnly
            />
          </fieldset>
          <div className="mt-[25px] flex justify-end">
            <Dialog.Close asChild>
              <RainbowButton className="text-white px-[18px] mr-[10px]" buttonType="danger" onClick={() => handleDelete()}>删除</RainbowButton>
            </Dialog.Close>
          </div>
          <Dialog.Close asChild>
            <button
              className="absolute right-2.5 top-2.5 inline-flex size-[25px] appearance-none items-center justify-center rounded-full hover:bg-violet4 focus:shadow-[0_0_0_2px] focus:shadow-violet7 focus:outline-none"
              aria-label="Close"
              onClick={() => setOpen(0)}
            >
              <MdClose />
            </button>
          </Dialog.Close>
        </Dialog.Content>
      </Dialog.Portal>
    </Dialog.Root>
  );
}